<template><!-- 视频标签 -->
  <div class="video-tag">
    <ul class="tag-list">
      <li class="tag-item" v-for="item in tagData">
        <div class="icon" />
        <div class="text">{{item}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      tagData: Array,
    },
    data() {
      return {

      }
    },
    created() {

    },
    methods: {

    },
  }
</script>

<style scoped lang="less">
  .video-tag {
    width: 100%;
    padding: 0 24px;
    margin: 10px 0;

    .tag-list {
      display: flex;
      align-items: center;

      .tag-item:nth-child(n + 2) {
        margin-left: 16px;
      }

      .tag-item {
        max-width: 200px;
        height: 38px;
        background: #FFFFFF30;
        border-radius: 19px;
        padding: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;

        overflow: hidden;

        .icon {
          width: 26px;
          height: 26px;
          background-image: url('../../../../../assets/images/pureVideo/tag.png');
          background-repeat: no-repeat;
          background-size: 100%;
        }

        .text {
          max-width: 174px;
          height: 30px;
          margin-left: 3px;
          font-size: 22px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 28px;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }
  }
</style>